<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>购物车案例01</title>
    <link rel="stylesheet" href="lib/css/index.css"/>
  </head>

  <body>
    <div id="app">
      <div class="container">
        <my-cart></my-cart>
      </div>
    </div>
    <script type="text/javascript" src="lib/js/vue.js"></script>
    <script type="text/javascript">
    var CartTitle ={
      props:['username'],
      template:`
      <div class="title">{{username}}商品</div>`
    }
    var CartList ={
      template:`
      <div>
            <div class="item">
              <img src="lib/img/a.jpg" />
              <div class="name"></div>
              <div class="change">
                <a href="">－</a>
                <input type="text" class="num" />
                <a href="">＋</a>
              </div>
              <div class="del">×</div>
            </div>
            <div class="item">
              <img src="lib/img/b.jpg" />
              <div class="name"></div>
              <div class="change">
                <a href="">－</a>
                <input type="text" class="num" />
                <a href="">＋</a>
              </div>
              <div class="del">×</div>
            </div>
            <div class="item">
              <img src="lib/img/c.jpg" />
              <div class="name"></div>
              <div class="change">
                <a href="">－</a>
                <input type="text" class="num" />
                <a href="">＋</a>
              </div>
              <div class="del">×</div>
            </div>
            <div class="item">
              <img src="lib/img/d.jpg" />
              <div class="name"></div>
              <div class="change">
                <a href="">－</a>
                <input type="text" class="num" />
                <a href="">＋</a>
              </div>
              <div class="del">×</div>
            </div>
            <div class="item">
              <img src="lib/img/e.jpg" />
              <div class="name"></div>
              <div class="change">
                <a href="">－</a>
                <input type="text" class="num" />
                <a href="">＋</a>
              </div>
              <div class="del">×</div>
            </div>
          </div>`
    }
    var CartTotal ={
      template:`
      <div class="total">
            <span>总价：123</span>
            <button>结算</button>
      </div>`
    }
    Vue.component('my-cart', {
      data:function(){
        return{
          username:'屈嘉龙'
        }
      },
      template:`
      <div class="cart">
       <cart-title :username="username"></cart-title>
       <cart-list></cart-list>
       <cart-total></cart-total>
      </div>
      `,
      components:{
      'cart-title':CartTitle,
      'cart-list':CartList,
      'cart-total':CartTotal
      }
    })
      var vm = new Vue({
        el: '#app',
        data: {}
      });
    </script>
  </body>
</html>
